<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件基础-component监听子组件事件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>

    </style>
</head>
<body>
<div id="app">

    <div :style="{ fontSize: postFontSize + 'em' }">
        <all-blog  v-for="p in posts"
                   v-bind:key="p.id+100"
                   v-bind:post="p"
        v-on:enlarge-text="postFontSize += 0.1">

        </all-blog>
    </div>
</div>


<script>

    Vue.component('all-blog', {
        props:['post'],
        template:"<div class='all-blog'>" +
            "<h3>{{post.title}}</h3>" +
            "<div v-html=\"post.content\"></div>" +
            "<button v-on:click=\"$emit('enlarge-text')\">放大文字尺寸</button>" +
            "</div>"
        // $emit通过这个，触发后面的enlarge-text方法
    });

    var app= new Vue({
        el:'#app',
        data:{
            posts: [
                { id: 0, title: 'My journey with Vue' ,content:'qqqqqqqqqqqqqqqqq'},
                { id: 1, title: 'Blogging with Vue' ,content:'wwwwwwwwww' },
                { id: 2, title: 'Why Vue is so fun' ,content:'rrrrrrrr' }
            ],
            postFontSize:1,
        },
        methods:{

        }
    })
</script>
</body>
</html>
